<html aria-label="Sciter Frame" aria-description="Main Sciter Frame">
  <head>
    <title>Sciter</title>
    <style>
      
      @const BUTTON_FORE_NORMAL: none;
      @const BUTTON_FORE_HOVER: url(toolbar-button-hover.png);
	    @const BUTTON_FORE_ACTIVE: url(toolbar-button-pressed.png);
	    @const BUTTON_FORE_CHECKED: url(toolbar-button-checked.png);
	    @const BUTTON_FORE_CHECKED_HOVER: url(toolbar-button-checked-hover.png);
	    @const BUTTON_FORE_DISABLED: none;

      @image-map icons {
        src: url(icons-h.png) 192dpi,
             url(icons-h.png) ;
        cells:3 2; /* 3 columns, 2 rows */
        /* logical names of the parts, see toolbar-icons.png */ 
        items:  open,
                refresh,
                inspector,
                help,
                glass,
                open-in-view;   
      }
            
      html { background-color:#5C4C4C; } 
      
      body {flow:horizontal; margin:0; }
      
      toolbar  
      {
        flow:vertical; 
        width:max-content; 
        padding:3dip; 
        height:*;
        background-color: transparent;
      }
      toolbar > button                   
      {
        display:block; 
        background-repeat:no-repeat; 
        background-position:50% 50%; 
        background-size:48dip 48dip;
        padding:0;
        size:56dip; 
	    }
	    frame#content{ size:*; 
	                   background :url(no-color.png) repeat; }
      frame#content > div#intro
      { 
        font: system;
        background-color:window; padding:3px; 
        size:*;
      }
      frame#content > div#intro > img#arrow { vertical-align:middle; size:0.8em; color:brown; }
      
      frame#content[allow-drop]
      {
          outline:2px orange solid -2px;
      }
            
      toolbar > button#open         { background-image:image-map(icons,open); }
      toolbar > button#reload       { background-image:image-map(icons,refresh); }
      toolbar > button#help         { background-image:image-map(icons,help); }
      toolbar > button#inspector    { background-image:image-map(icons,inspector); }
      toolbar > button#open-in-view { background-image:image-map(icons,open-in-view); }
      toolbar > button#glass        { background-image:image-map(icons,glass); margin-top:*; }
            
      
      /*div#intro { behavior:htmlarea; }*/
      
      @media on-glass 
      {
         html { background-color:transparent; }
         frame#content { background-image:none; }
      }
      
      hr { margin:0; padding:0; height:0; border:none; border-top: 1px dashed #999; }
      
    </style>

    <script type="text/tiscript">

      const content = $(frame#content);
      const inspectorButton = $(button#inspector);

	    var filename = null;
      const file_filter = "files *.htm,*.html,*.svg,*.zip,*.scapp|*.HTM;*.HTML;*.SVG;*.ZIP;*.SCAPP|"
				 "HTML files only(*.htm,*.html)|*.HTM;*.HTML|"
         "SVG files only(*.svg)|*.SVG|"
				 "SCAPP files only (*.zip,*.scapp)|*.ZIP;*.SCAPP|"
				 "All Files (*.*)|*.*";
         
      var debugIsActive = false; 

      function loadFile(fn)
      {
	      filename = fn;
	      content.load(fn);
        $(button#reload).state.disabled = false;
        var inspectorButton = $(button#inspector);
        inspectorButton.state.disabled = false;
        if(debugIsActive)
          view.launchDebugView();
        var croot = content[0];
        var title = croot.$(head>title); 
        if( title )
          view.caption =  title.text || "Sciter"; 
        else 
          view.caption =  "Sciter"; // calling native method defined in sciter.h 
       }

      $(button#open).onClick = function()
      {
        var fn = view.selectFile(#open,file_filter);
		    if( fn ) 
		    {
          loadFile(fn);
          // getting root node of the frame
          //var croot = content[0];
          //var title = croot.$(head>title); 
          //if( title )
          //  view.caption = title.text; // calling native method defined in sciter.h 
        }
      }
      $(button#reload).onClick = function()
      {
		    if( filename ) {
          content.load(filename);
          if(debugIsActive)
            view.launchDebugView();
        }
      }

      $(button#open-in-view).onClick = function()
      {
        var fn = view.selectFile(#open,file_filter);
		    if( fn ) 
		    {
          view.load(fn);
        }
      }

      var bbModesCount = 0;
      $(button#glass).onClick = function()
      {
        const bbModes = [#ultra-dark,#dark,#light,#ultra-light,#auto];

        if(this.value) { 
          bbModesCount = (bbModesCount + 1) % bbModes.length;
		      view.windowBlurbehind = bbModes[bbModesCount];
        }
        else
          view.windowBlurbehind = undefined;
      } 
      
       $(button#help).onClick = function()
      {
        //view.open("file://" + System.home("../doc/main.htm"));
        view.window 
        {
          url: "file://" + System.home("../doc/main.htm"),
          type: View.FRAME_WINDOW,
          state: View.WINDOW_SHOWN,
          alignment:5,
          width: 1024,
          height: 800
        };
      }

      function content.onExchange(evt)
      {
         if( evt.type == Event.X_DRAG_ENTER && evt.draggingDataType == #file)
         {
           this.@#allow-drop = true;
           return true;
         }
         else if( evt.type == Event.X_DRAG_LEAVE )
         {
           this.@#allow-drop = undefined;
           return true;
         }
         else if( evt.type == Event.X_DRAG && evt.draggingDataType == #file)
         {
           return true;
         }
         else if( evt.type == Event.X_DROP && evt.draggingDataType == #file)
         {
           this.@#allow-drop = undefined;
           var fn;
           if(typeof evt.dragging == #array)
             fn = evt.dragging[0];
           else
  		       fn = evt.dragging;
           loadFile(fn);
           return true;
         }
      }

      $(button#inspector).onClick = function()
      {
        if( var connectToInspector = view.connectToInspector ) 
          connectToInspector($(frame#content));
        //view.launchDebugView();
      }

      function self.onKey(evt)
      {
        if( evt.type == Event.KEY_DOWN 
         && evt.keyCode == Event.VK_F12 
         && !$(button#inspector).state.disabled )
        {
          view.launchDebugView();
          return true;
        }
      }

      function self.ready() {
        view.caption = "Sciter";
      }
      
           
    </script>

  </head>
  <body aria-label="Sciter Frame Body">
    <toolbar role="toolbar">
      <button #open title="load html" aria-label="Load Document" />
      <button #open-in-view title="load html in view" aria-label="Load Document in View" />
      <button #reload title="reload html" disabled aria-label="Reload Document" />
      <button #help title="Help browser" aria-label="Help" />
      <hr>
      <button #inspector title="DOM inspector" aria-label="DOM inspector" />
      <button|checkbox #glass title="Glass mode" aria-label="Set Glass Mode"/> 
    </toolbar>
    <frame #content src="sys-info.htm" aria-label="Content" ></frame>
  </body>
</html>